<!-- 变压器详情 -->

<template>
  <WebShow class="BottomTransformator-DetailTransformator">
    <div>
      <b>{{ one.monitorPointSiteName || '设备名称' }}</b>
      <ShowStatus bind="alarmStatus" :dict="CORE.DICT.STATUS_ALARM" noLabel auto />
    </div>

    <ShowText label="额定功率" bind="" empty="-" />

    <RealtimeRefresh>
      <EasyRow>
        <ShowDict label="设备状态" bind="deviceStatus" :dict="CORE.DICT.STATUS_ONLINE_DEVICE" auto>
          <template #default="{ text }">
            <span :style="deviceStatusStyle">{{ text }}</span>
          </template>
        </ShowDict>
        <ShowTime label="更新时间" bind="collectTime" auto />
      </EasyRow>
    </RealtimeRefresh>

    <WebTable :list="one.dataList" :height="442" noPage>
      <RowTitle label="参数" bind="name" :minWidth="100" noTip />
      <RowNum label="数值" bind="value">
        <template #suffix="{ row }">
          <span v-if="row.value">{{ row.unit }}</span>
        </template>
      </RowNum>
    </WebTable>
  </WebShow>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from './store'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DetailTransformator',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store)],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(
    require.context('../../../components', true, /vue$/),
    require.context('./', true, /vue$/),
  ),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 状态样式
     */
    deviceStatusStyle() {
      const color = CORE.dict(CORE.DICT.STATUS_ONLINE_DEVICE, this.one.deviceStatus, 3)

      // 颜色是否有效
      const colorData = CORE.DICT.COLOR.find(([cn]) => color === cn)
      if (!colorData) return null

      return { color: colorData[2] }
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
